<template>
  <zm-view ref="view">
    <view class="py-20 px-24">
      <view class="bg-white radius-16 py-30 px-20 flex items-center" @click="toView('pages/person/user-profile/user-profile')">
        <u-image :src="userInfo.headImg" width="120rpx" height="120rpx" radius="50%"></u-image>
        <text class="mx-20 font-32 font-700 text-row-1">{{ userInfo.nickName }}</text>
        <view class="ml-auto">
          <zm-icon name="arrow" size="32rpx" color="#cccccc"></zm-icon>
        </view>
      </view>

      <zm-cell-group border-radius="16rpx" title-size="30rpx" content-size="30rpx" content-color="#999999" right-icon-size="32rpx" right-icon-color="#cccccc" custom-class="mt-20">
        <zm-cell title="关联手机号" :content="userInfo.mobile" height="96rpx" :clickable="false" padding="0 20rpx"></zm-cell>
        <!-- <zm-cell title="关联微信号" :content="userInfo.nickName ? '已关联' : '未关联'" height="96rpx" :clickable="false" padding="0 20rpx"></zm-cell> -->
      </zm-cell-group>

      <zm-cell-group border-radius="16rpx" title-size="30rpx" content-size="30rpx" content-color="#999999" right-icon-size="32rpx" right-icon-color="#cccccc" custom-class="mt-20">
        <!-- #ifndef MP-WEIXIN || WEB -->
        <zm-cell title="修改密码" content="修改" is-link :border="false" height="96rpx" padding="0 20rpx"></zm-cell>
        <!-- #endif -->
        <zm-cell title="注销账号" content="联系客服" is-link :border="false" height="96rpx" padding="0 20rpx" @click="useServiceJump"></zm-cell>
      </zm-cell-group>

      <zm-cell-group
        :border="false"
        border-radius="16rpx"
        title-size="30rpx"
        content-size="30rpx"
        content-color="#999999"
        right-icon-size="32rpx"
        right-icon-color="#cccccc"
        custom-class="mt-20"
      >
        <zm-cell title="关于我们" :content="`V${version}`" is-link :border="false" height="96rpx" padding="0 20rpx" url="/pages/person/about-us/about-us"></zm-cell>
      </zm-cell-group>
    </view>

    <zm-footer safe-area-inset-bottom>
      <view class="py-36 px-24">
        <zm-button type="primary" height="100rpx" size="large" round @click="handleLogout">退出登录</zm-button>
      </view>
    </zm-footer>

    <!-- 退出登录提示 -->
    <zm-dialog ref="dialog"></zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      version: ""
    }
  },
  computed: {
    ...mapGetters(["userInfo", "login", "webEnv"])
  },
  mounted() {
    this.getVersion()
  },
  methods: {
    // 退出登录
    handleLogout(_, { loading }) {
      this.$refs.dialog.open({
        title: "提示",
        content: "确认退出登录吗？",
        confirmButtonText: "确认退出",
        showCancelButton: true,
        cancelButtonText: "取消",
        onConfirm: async () => {
          loading(true, "退出登录中...")
          await this.$store.dispatch("logout")
          uni.$toast({ mask: true, content: "退出登录成功" })
          setTimeout(() => {
            this.toView({ type: "tab", url: "pages/tabbar/tabbar-5/tabbar-5" })
          }, 1500)
        }
      })
    },
    // 获取版本号
    async getVersion() {
      const res = await uni.getSystemInfoSync()
      this.version = res.appVersion
    }
  }
}
</script>

<style lang="scss" scoped></style>
